<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>REST CRUD</title>
<link rel="stylesheet" type="text/css" href="crud.css">
<script src="scripts/prototype.js"></script>
<script>

var baseurl = 'http://localhost:8080/crud/webresources/persons';
var PREAMBLE = '<div id="deleteOptions"><table class="tableone" summary="This table lists persons in the database."> <caption>Persons In Database</caption>';
PREAMBLE +='<thead> <tr>';
PREAMBLE +='<th class="th1" scope="col">&nbsp;&nbsp;&nbsp;&nbsp;</th> <th class="th2" scope="col">Name</th> <th class="th3" scope="col">Age</th> <th class="th4" scope="col">Update</th></tr>';
PREAMBLE +='</thead><tfoot> <tr> <td colspan="5">Check items for deletion.</td> </tr> </tfoot> <tbody> <tr><td colspan="4"> <div class="innerb">';
PREAMBLE +='<table class="tabletwo"><tbody>';
var POSTAMBLE='</tbody></table>';
var tempateText='<tr><th class="td1" scope="row"><input type="checkbox" id="#{id}"/></th><td class="td2">#{name}</td><td class="td3">#{age}</td><td class="td4"><input type="button" value="Update"onClick=" populatePerson(\'#{id}\',\'#{name}\',\'#{age}\');"/></td></tr>';


// This would make more sense to use not causing another network transaction but we will use the one below
// to test the get id functionality of our service.
function populatePersonInPage(id,name,age) {
	$('theId').value=id;
	$('name').value=name;
	$('age').value=age;
	$('updateAdd').value = "Update Person";
}

function populatePerson(id,name,age) {
	new Ajax.Request(baseurl+'/'+id,
			  {
			    method:'get',
			    onSuccess: function(transport){
	    			try{
					  var json = transport.responseText.evalJSON();
					  	$('theId').value= json.id;
						$('name').value=json.name;
						$('age').value=json.age;
						$('updateAdd').value = "Update Person";
	 		  		 } catch(err) {
	    				  txt="There was an error on this page.\n\n";
	    				  txt+="Error description: " + err.description + "\n\n";
	    				  txt+="Click OK to continue.\n\n";
	    				  alert(txt);
	    			  }
			   },
			    onFailure: function(){ alert('Something went wrong...') }
			  });
}


function clear() {
	$('theId').value='';
	$('name').value='';
	$('age').value='';
	$('updateAdd').value = "Add Person";
}

function deletePersons()
{
	var someNodeList = $('deleteOptions').getElementsByTagName('input');
	var nodes = $A(someNodeList);

	if(nodes.length < 1 ) {
		alert("Select person to delete");
		return;
	}
	var parameters = new Array();
	var count = 0;
	var ids = '';
	nodes.each(function(node){
			if( (node.id != null)&&(node.checked) ) {
				if(count>0) ids +=",";
				ids += node.id;
				parameters[count++] = node.id;
			}
		});

   new Ajax.Request(baseurl+"/"+ids,
			  {
			    method:'delete',
			    onSuccess: function(transport){
	    			var reply = transport.responseText;
	    			getPersons();
			   },
			    onFailure: function(){ alert('Something went wrong...') }
			  });
   clear();
}

function getPersons() {
	new Ajax.Request(baseurl,
			  {
			    method:'get',
			    onSuccess: function(transport){
	    			try{
					  var json = transport.responseText.evalJSON();
					  var rowItem = new Template(tempateText);
					  var formatted = PREAMBLE;
				
					json.Users.each(function(user){formatted += rowItem.evaluate(user);})
					formatted += POSTAMBLE;
					$('result').innerHTML = formatted; 
	 		  		 } catch(err) {
	    				  txt="There was an error on this page.\n\n";
	    				  txt+="Error description: " + err.description + "\n\n";
	    				  txt+="Click OK to continue.\n\n";
	    				  alert(txt);
	    			  }
			   },
			    onFailure: function(){ alert('Something went wrong...') }
			  });

}

function addPerson() {
	var name= $('name').value;
	var age = $('age').value;
	var anId  = $('theId').value;
	var method;
	
	var newurl;
	
	if($('updateAdd').value == "Update Person"){
		method='put';
		newurl = baseurl+"/id/"+anId+"/name/"+name+"/age/"+age;
	} else {
		method='post';
		newurl = baseurl+"/name/"+name+"/age/"+age;
	}

	new Ajax.Request(newurl,
			  {
			    method:method,
			    onSuccess: function(transport){
					getPersons();
					clear();
			   },
			    onFailure: function(){ alert('Something went wrong...') }
			  });

}

function clearit()
{
	
	var myAjax = new Ajax.Request(baseurl+"/clear/clear",
				{
					method: 'get',
					onSuccess: function(transport){
					clear();
				}, 
					onFailure: function reportError(request)
					{
						alert('Sorry. There was an error.');
					}
				});
	
}

</script>

</head>
<body onload="return getPersons()">
<div id="container">
<div id="top">
<h1>REST: CRUD Sample</h1>

<h2>Utilizing: Jersey, Spring, JPA and Hibernate&nbsp;</h2>
</div>

<table summary="Outter table">
	<tr>
		<td>
		<div id="input">
		<table>
			<tbody>
				<tr>
					<td><label>Name:</label></td>
					<td><input id="name" type="text"></td>
				</tr>
				<tr>
					<td><label>Age:</label></td>
					<td><input id="age" type="text"></td>
				</tr>
				<tr>
					<td><label>Id:</label></td>
					<td><input id="theId" disabled="disabled" type="text"></td>
				</tr>
				<tr>
					<td><input value="Clear" onclick="clearit();" type="button"></td>
					<td>
					<input value="Add Person" id="updateAdd"
						onclick="addPerson();" type="button"></td>
				</tr>
			</tbody>
		</table>
		</div>
		</td>
		<td>
		<div id="plist">
		<div id="result"></div>
		</div>
		<div id="deleteDiv"><input type="button" value="Delete"
			onClick="deletePersons();" /></div>
		</td>
	</tr>
</table>
<div id="footer"><a href="http://www.persistentdesigns.com">Persistent
Designs Inc.</a></div>
</div>
</body>
</html>
